<template>
    <div class="Back"> 
        <div class="content flex">
			<div id="title" ref="title">{{NoticeInfo.title||'提示'}}</div>
			<div id="message">{{NoticeInfo.message||'欢迎使用MT Notice'}}</div>
			<el-button @click="comfirm()" ref="button" type="primary" class="button">收到</el-button>
		</div>
    </div>
</template>

<script>
	import {mapState,mapMutations} from 'vuex'
export default {
	data(){
		return{
			color:{
				success:'green',
				// 'info':'black',
				error:'red',
				warn:'orange'
			}
		}
	},
	computed:{
		...mapState('Tool',['NoticeInfo']),
	},
	methods:{
		...mapMutations('Tool',['NOTICEDOWN']),
		comfirm(){
			if(this.NoticeInfo.type=='error')
			   this.$public.Logout()
			if(this.NoticeInfo.type=='warn')
			   this.$public.Back(true)
			this.NOTICEDOWN()
		}
	},
    mounted() {
   	   this.$refs.title.style.color =this.color[this.NoticeInfo.type]||'black'
	   this.$refs.button.$el.style.background = this.color[this.NoticeInfo.type]||'gray'
   }
};
</script>

<style scoped lang='less'>
.Back{
    background: rgba(0, 0, 0, 0.7);
}
.content{
	max-width: 500px;
	min-width: 250px;
	width:50vw;
	min-height: 200px;
	background: white;
	border-radius: 20px;
	padding: 10px;
	
	#title{
		width: 100%;text-align: center;
		font-size: 20px;
		font-weight: 600;
	}
	#message{
		width: 100%;text-align: center;
		margin:20px 0px;
	}
	.button{
		width: 70%;
		border-radius: 30px;
		color: white;
		font-size: 20px;
		font-weight: 600;
		letter-spacing: 5px;
	}
}
</style>
